<template>
  <div class="xuexi-container">
    <!-- 顶部导航 -->
    <div class="top-bar">
      <div class="left-section">
        <img src="@/assets/100.png" class="icon back" @click="goBack" alt="返回" />
        <span class="study-info">需学习 9</span>
      </div>
      <div class="right-icons">
        <img src="@/assets/10.png" class="icon" alt="10" />
        <img src="@/assets/9.png" class="icon" alt="9" />
      </div>
    </div>

    <!-- 单词图片 -->
    <div class="word-image">
      <img src="@/assets/xuexi1.png" alt="disappointed" />
    </div>

    <!-- 单词与音标 -->
    <div class="word-section">
      <div class="word">disappointed</div>
      <div class="phonetic" @click="playAudio">
        <span>美 </span>
        <span class="ipa">/ˈenərdʒi/</span>
      </div>
    </div>

    <!-- 例句 -->
    <div class="sentence">
      He felt quite <b>disappointed</b> about his test score.
    </div>

    <!-- 释义选项 -->
     <div class="options">
      <div 
        v-for="(item, idx) in options" 
        :key="idx" 
        class="option"
        :class="{ 'wrong': selectedWrong === idx }"
        @click="handleOptionClick(idx)"
      >
        <template v-if="selectedWrong === idx">
          <div class="wrong-content">
            <div class="wrong-title">emerge</div>
            <div class="wrong-desc">adj.杂乱的，无逻辑的，脱节的</div>
            <span class="wrong-x">✕</span>
          </div>
        </template>
        <template v-else>
          {{ item }}
        </template>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-bar">
      <img src="@/assets/7.png" class="bottom-icon" alt="7" />
      <img src="@/assets/6.png" class="bottom-icon" alt="6" />
      <img src="@/assets/5.png" class="bottom-icon" alt="5" />
    </div>

    <!-- 隐藏的音频 -->
    <audio ref="audioRef" src="https://dict.youdao.com/dictvoice?audio=energy&type=2"></audio>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const audioRef = ref(null)

function goBack() {
  router.push({ name: 'danci' })
}

function playAudio() {
  audioRef.value && audioRef.value.play()
}

const options = [
  'adj.失望的，沮丧的',
  'adj.杂乱的，无逻辑的，脱节的',
  'adj.沉迷于酒色的',
  'n.分歧，不和；不一致：意见...'
]
const selectedWrong = ref(null)
function handleOptionClick(idx) {
  // 假设第0项为正确释义
  if (idx !== 0) {
    selectedWrong.value = idx
  } else {
    router.push({ name: 'XX1' })
  }
}
</script>

<style scoped>
.xuexi-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 45px 45px 0 45px;
}
.left-section {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon.back {
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.study-info {
  font-size: 16px;
  color: #888;
}
.right-icons {
  display: flex;
  gap: 12px;
}
.icon {
  width: 28px;
  height: 28px;
}
.word-image {
  display: flex;
  justify-content: center;
  margin: 65px 0 28px 0;
}
.word-image img {
  width: 100%;
  height: 343px;
  margin: 0 45px 0 45px;
  border-radius: 12px;
}
.word-section {
  text-align: center;
  margin-bottom: 8px;
}
.word {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 15px;
}
.phonetic {
  display: inline-flex;
  align-items: center;
  color: #888;
  font-size: 1.1rem;
  cursor: pointer;
}
.ipa {
  margin: 0 4px;
}
.sound-icon {
  width: 20px;
  height: 20px;
  margin-left: 4px;
}
.sentence {
  text-align: center;
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 265px;
}
.options {
  display: grid;
  text-align: left;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  padding: 0 45px;
  margin-bottom: 65px;
}
.option {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 60px 60px;
  font-size: 1rem;
  color: #222;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  position: relative;
  cursor: pointer;
}
.option.wrong {
  background: #f8d7da;
  color: #a94442;
  border: 1.5px solid #f5c2c7;
}
.wrong-content {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wrong-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 6px;
}
.wrong-desc {
  font-size: 0.95rem;
}
.wrong-x {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  background: #e74c3c;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.bottom-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0 18px 0;
  border-top: 1px solid #eee;
  background: #fff;
}
.bottom-icon {
  width: 38px;
  height: 38px;
}
</style>